<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	window.onload = function(){
		var start =1;
		
		var button = document.getElementById('button');

		button.onclick = function (){
			if (start ==1){
				time= setInterval(run,20);
				start =0;
			}
			else if(start==0){
				clearInterval(time);
				start =1;
			}

		function run(){
			var picure = document.getElementById("picture");
			if(picture.currentStyle) {  
       			left= parseInt(picture.currentStyle["left"]);  
       			top= parseInt(picture.currentStyle["top"]); 
       																				
       		}else {  
   				left = parseInt(getComputedStyle(picture,false)["left"]); 
   				top = parseInt(getComputedStyle(picture,false)["top"]); 
   			}   

			// if(left<=0){
			// 	right =0;
				
			// }else if(left>=document.documentElement.clientWidth-100){	
			// 	right=1;
			// }
			alert(left);
			 alert(top);

			if(top<=0){
				bottom =0;
				
			}else if(top>=document.documentElement.clientHeight-100){	
				bottom=1;
			}


			// if(right==0){
			// 	picture.style.left=(left+10)+"px";
			// }
			// else if(right==1) {
			// 	picture.style.left=(left-10)+"px";
			// }

			if(bottom==0){
				picture.style.top=(top+10)+"px";
			}
			else if(bottom==1) {
				picture.style.top=(top-10)+"px";
			}
		}

		
		}
	}
	
	</script>

	<style>
	#picture{
		position: absolute;
		width: 100px;
		height: 100px;
		left: 0px;
		top:0px;
	}
</style>


</head>
<body>


	<img src="005.jpg" alt="" id="picture">
	</br>
	</br>
	</br>
	</br>
	</br>

	<input type="button" value="左右移动" id="button" >
	
	
</body>
</html>